<!DOCTYPE html>
<html>
    <head>
        <script src="./js/plotly-latest.min.js"></script>
    </head>
    <body>
        <div id="myPlot" style="width: 100%; max-width: 700px;height: 100%;"></div>
        <script>
            window.onload = function(){

                const xArray = [50,60,70,80,90,100,110,120,130,140,150]
                const yArray = [7,8,8,9,9,9,10,11,14,14,15]

                // const data = [{
                //     x:xArray,
                //     y:yArray,
                //     mode:"markers"
                // }]
                const data = [{
                    x:xArray,
                    y:yArray,
                    mode:"lines"
                }]


                const layout = {
                    xaxis:{range:[40,160],title:"Square Meters"},
                    yaxis:{range:[5,16],title:"Price in Millions"},
                    title: "House Prices vs. Size"
                }
                
                Plotly.newPlot("myPlot",data,layout);
            }
        </script>
    </body>
</html>